<template>
<div>
    <el-table ref="multipleTable" :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" tooltip-effect="dark" style="width: 100%">

        <el-table-column prop="id" label="序号" width="80" sortable>
        </el-table-column>

        <el-table-column prop="name" label="信息名称" width="100" sortable>
        </el-table-column>

        <el-table-column prop="password" label="所属类别" width="120">
        </el-table-column>

        <el-table-column prop="password" label="分析结果" width="120">
        </el-table-column>

        <el-table-column prop="password" label="最近分析时间" width="120">
        </el-table-column>


        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">详情
                </el-button>
                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <div style="text-align: center;margin-top: 20px;">
        <el-pagination background layout="prev, pager, next" :total="total" @current-change="current_change">
        </el-pagination>
    </div>
    <div class="m">
        <!-- Form -->
        <el-dialog style="width:70%;margin:0 auto;" title="任务信息" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="任务名称" :label-width="formLabelWidth">
                            <el-input v-model="form.name" value="" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="关联库" :label-width="formLabelWidth">
                            <el-select v-model="form.status">
                                <el-option v-for="item in types" :key="item.id" :label="item.label" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                </el-row>

                <el-row>

                    <el-col :span="12">
                        <el-form-item label="功能选择" :label-width="formLabelWidth">
                            <el-input v-model="form.password" value="" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="模型文件" :label-width="formLabelWidth">
                            <el-select v-model="form.power">
                                <el-option v-for="item in powers" :key="item.id" :label="item.label" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                </el-row>

                <el-row>

                    <el-col :span="12">
                        <el-form-item label="执行周期" :label-width="formLabelWidth">
                            <el-input v-model="form.password" value="" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="状态" :label-width="formLabelWidth">
                            <el-select v-model="form.power">
                                <el-option v-for="item in powers" :key="item.id" :label="item.label" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="输入/输出" :label-width="formLabelWidth">
                            <el-select v-model="form.IO">
                                <el-option v-for="item in IOes" :key="item.id" :label="item.label" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="说明" :label-width="formLabelWidth">
                            <el-input type="textarea" v-model="form.note"></el-input>
                        </el-form-item>
                    </el-col>

                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="showForm = true">任务参数配置</el-button>
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="Dopost">确 定</el-button>
            </div>
        </el-dialog>
        <!--任务参数配置-->
        <el-dialog title="任务参数配置" :visible.sync="showForm">
            <el-form :model="form">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="输入/输出" :label-width="formLabelWidth">
                            <el-select v-model="form.IO">
                                <el-option v-for="item in IOes" :key="item.id" :label="item.label" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="选择设备" :label-width="formLabelWidth">
                            <el-select v-model="form.device">
                                <el-option v-for="item in devices" :key="item.id" :label="item.label" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="信息类型" :label-width="formLabelWidth">
                            <el-select v-model="form.msg">
                                <el-option v-for="item in msgs" :key="item.id" :label="item.label" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="选择参数" :label-width="formLabelWidth">
                            <el-select v-model="form.canshu">
                                <el-option v-for="item in canshus" :key="item.id" :label="item.label" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="参数个数" :label-width="formLabelWidth">
                            <el-select v-model="form.total">
                                <el-option v-for="item in types" :key="item.id" :label="item.label" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="操作" :label-width="formLabelWidth">
                            <el-select v-model="form.op">
                                <el-option v-for="item in ops" :key="item.id" :label="item.label" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showForm = false">取 消</el-button>
                <el-button type="primary" @click="showForm = false">确 定</el-button>
            </div>
        </el-dialog>

        <!-- Form -->
        <el-dialog style="width:70%;margin:0 auto;" title="添加任务配置" :visible.sync="addTask1">
            <el-form :model="addTask_form">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="任务名称" :label-width="formLabelWidth">
                            <el-input v-model="addTask_form.name" value="" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="关联库" :label-width="formLabelWidth">
                            <el-select v-model="addTask_form.status">
                                <el-option v-for="item in types" :key="item.id" :label="item.label" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                </el-row>

                <el-row>

                    <el-col :span="12">
                        <el-form-item label="功能选择" :label-width="formLabelWidth">
                            <el-input v-model="addTask_form.password" value="" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="模型文件" :label-width="formLabelWidth">
                            <el-select v-model="addTask_form.power">
                                <el-option v-for="item in powers" :key="item.id" :label="item.label" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                </el-row>

                <el-row>

                    <el-col :span="12">
                        <el-form-item label="执行周期" :label-width="formLabelWidth">
                            <el-input v-model="addTask_form.password" value="" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="状态" :label-width="formLabelWidth">
                            <el-select v-model="addTask_form.power">
                                <el-option v-for="item in powers" :key="item.id" :label="item.label" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="输入/输出" :label-width="formLabelWidth">
                            <el-select v-model="addTask_form.IO">
                                <el-option v-for="item in IOes" :key="item.id" :label="item.label" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="说明" :label-width="formLabelWidth">
                            <el-input type="textarea" v-model="addTask_form.note"></el-input>
                        </el-form-item>
                    </el-col>

                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addTask = true">任务参数配置</el-button>
                <el-button @click="addTask1 = false">取 消</el-button>
                <el-button type="primary" @click="AddTask">确认添加</el-button>
            </div>
        </el-dialog>

        <!--添加任务管理-->
        <el-dialog title="添加任务管理" :visible.sync="addTask">
            <el-form :model="addTask_form">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="输入/输出" :label-width="formLabelWidth">
                            <el-select v-model="addTask_form.IO">
                                <el-option v-for="item in IOes" :key="item.id" :label="item.label" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="选择设备" :label-width="formLabelWidth">
                            <el-select v-model="addTask_form.device">
                                <el-option v-for="item in devices" :key="item.id" :label="item.label" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="信息类型" :label-width="formLabelWidth">
                            <el-select v-model="addTask_form.msg">
                                <el-option v-for="item in msgs" :key="item.id" :label="item.label" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="选择参数" :label-width="formLabelWidth">
                            <el-select v-model="addTask_form.canshu">
                                <el-option v-for="item in canshus" :key="item.id" :label="item.label" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="参数个数" :label-width="formLabelWidth">
                            <el-select v-model="addTask_form.total">
                                <el-option v-for="item in types" :key="item.id" :label="item.label" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="操作" :label-width="formLabelWidth">
                            <el-select v-model="addTask_form.op">
                                <el-option v-for="item in ops" :key="item.id" :label="item.label" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addTask = false">取 消</el-button>
                <el-button type="primary" @click="addTask = false">确 定</el-button>
            </div>
        </el-dialog>

    </div>

</div>
</template>

<style scoped>
.m {
    width: 300px;
}

.el-select .el-input__inner {
    width: 100px;
}

.el-input {
    width: 150px;
}

.top {
    height: 40px;
    background-color: aqua;
    line-height: 40px;
    text-align: center;
    padding: 20px;
}

h1 {
    display: block;
    float: left;
    margin-left: 10%;
}

.el-select {
    display: block;
    float: left;
    line-height: 40px;
    width: 150px;
    height: 40px;
}

.el-pagination {
    display: block;

}

.el-table .warning-row {
    background: oldlace;
    text-align: center;
}

.el-table .success-row {
    background: #f0f9eb;
    text-align: center;
}

.el-row {
    margin-bottom: 20px;
}

.el-col {
    border-radius: 4px;
}
</style>

<script>
import Qs from 'qs'
export default {
    name: "dataList",
    data() {
        return {
            multipleSelection: [],
            pagesize: 7,
            currentPage: 1,
            types: [{
                id: '1',
                label: '在线'
            }, {
                id: '0',
                label: '离线'
            }, {
                id: '2',
                label: '禁用'
            }, ],

            ops: [{
                id: '1',
                label: '操作1'
            }, {
                id: '0',
                label: '操作2'
            }, {
                id: '2',
                label: '操作3'
            }, ],

            canshus: [{
                id: '1',
                label: '参数1'
            }, {
                id: '0',
                label: '参数2'
            }, {
                id: '2',
                label: '参数3'
            }, ],

            msgs: [{
                id: '1',
                label: '信息1'
            }, {
                id: '0',
                label: '信息2'
            }, {
                id: '2',
                label: '信息3'
            }, ],
            IOes: [{
                id: '1',
                label: '输入'
            }, {
                id: '0',
                label: '输出'
            }, ],

            powers: [{
                id: '0',
                label: '设备1'
            }, {
                id: '1',
                label: '设备2'
            }, {
                id: '2',
                label: '设备3'
            }, ],

            devices: [{
                id: '0',
                label: '设备1'
            }, {
                id: '1',
                label: '设备2'
            }, {
                id: '2',
                label: '设备3'
            }, ],
            state: {},
            value: '',
            form: '',
            addTask_form: {},
           out: 0,
            warn: 0,
            sum: this.$store.state.Userinfo.length,
            dialogTableVisible: false,
            dialogFormVisible: false,
            showForm: false,
            addTask: false,
            addTask1: false,
            formLabelWidth: '80px'
        }
    },
    computed: {
        tableData: function () {
            return this.$store.state.Userinfo;
        },
        total() {
            return this.$store.state.Userinfo.length
        },
        online() {
            var online = 0;
            for (let i = 0; i < this.$store.state.Userinfo.length; i++) {
                if (this.$store.state.Userinfo[i].status == 1) {
                    online++;
                }
            }
            return online;
        }
    },
    watch: {
        from: function (newVal, oldVal) {
            return oldVal;
        },
        form2: function (newVal, oldVal) {
            return oldVal;
        }
    },
    filters: {

    },
    methods: {
        addTaskman() {

        },
        filterHandler(value, row, column) {
            const property = column['property'];
            return row[property] === value;
        },
        formatPower: function (row, column) {
            return row.power == 0 ? '管理员' : row.power == 1 ? '用户' : '全部';
        },
        formatStatus: function (row, column) {
            return row.status == 1 ? '在线' : row.status == 0 ? '离线' : '禁用';
        },
        formatTime: function (row, column, cellValue) {
            let y = cellValue.substring(0, 4);
            let m = cellValue.substring(4, 6);
            let d = cellValue.substring(6, 8);
            return y + "-" + m + "-" + d;
        },
        current_change: function (currentPage) {
            this.currentPage = currentPage;
        },
        getuser_info() {
            this.$store.dispatch('GET_USERINFO');
        },
        //修改信息
        handleEdit(index, row) {
            this.dialogFormVisible = true;
            this.$store.state.row.index = index;
            this.form = JSON.parse(JSON.stringify(this.$store.state.Userinfo[this.$store.state.row.index]));
            console.log("修改的ID序号为" + this.form.id)
        },
        //获取排序的方式
        selectGet(vId) {
            let obj = {};
            obj = this.options.find((item) => { //这里的selectList就是上面遍历的数据源
                return item.id === vId; //筛选出匹配数据
            });
            console.log(obj.id); //我这边的name就是对应label的
            console.log(obj.label);
        },
        //将设备离线
        handleOut(index, row) {
            let Form = this.$store.state.Userinfo[index]
            Object.assign(Form, {
                "oper": "1",
            })
            console.log(Form)
            this.$axios({
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                method: 'post',
                transformRequest: [function (data) {
                    // 对 data 进行任意转换处理        
                    return Qs.stringify(data)
                }],
                url: "./action/device_man",
                data: Form
            }).then((res) => {
                if (res.data) {
                    alert("该设备已离线！");
                }
            });
        },
        //禁用设备
        handleWarn(index, row) {
            let Form = this.$store.state.Userinfo[index]
            Object.assign(Form, {
                "oper": "3",
            })
            console.log(Form)
            this.$axios({
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                method: 'post',
                transformRequest: [function (data) {
                    // 对 data 进行任意转换处理        
                    return Qs.stringify(data)
                }],
                url: "./action/device_man",
                data: Form
            }).then((res) => {
                if (res.data) {
                    alert("该设备已禁用！");
                }
            });
        },
        //删除设备信息
        handleDelete(index, row) {
            let Form = this.$store.state.Userinfo[index]
            Object.assign(Form, {
                "oper": "0",
            })
            console.log(Form)
            this.$axios({
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                method: 'post',
                transformRequest: [function (data) {
                    // 对 data 进行任意转换处理        
                    return Qs.stringify(data)
                }],
                url: "./action/device_man",
                data: Form
            }).then((res) => {
                if (res.data) {
                    alert("成功删除该设备！");
                }
            });
        },
        //恢复设备
        handleBack(index, row) {
            let Form = this.$store.state.Userinfo[index]
            Object.assign(Form, {
                "oper": "4",
            })
            console.log(Form)
            this.$axios({
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                method: 'post',
                transformRequest: [function (data) {
                    // 对 data 进行任意转换处理        
                    return Qs.stringify(data)
                }],
                url: "./action/device_man",
                data: Form
            }).then((res) => {
                if (res.data) {
                    alert("成功恢复该设备！");
                }
            });
        },
        AddTask() {
            console.log(this.addTask_form)
            Object.assign(this.addTask_form, {
                "oper": "2",
            })
            console.log(this.addTask_form)
            this.$axios({
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                method: 'post',
                transformRequest: [function (data) {
                    // 对 data 进行任意转换处理        
                    return Qs.stringify(data)
                }],
                url: "./action/device_man",
                data: this.addTask_form
            }).then((res) => {
                if (res.data) {
                    this.$store.dispatch('GET_DEVICEINFO');
                    alert("修改成功");
                }
            });
        },
        //确定修改后，向后台发起请求
        Dopost() {
            console.log(this.form)
            Object.assign(this.form, {
                "oper": "2",
                "id": this.form.id
            })
            console.log(this.form)
            this.$axios({
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                method: 'post',
                transformRequest: [function (data) {
                    // 对 data 进行任意转换处理        
                    return Qs.stringify(data)
                }],
                url: "./action/device_man",
                data: this.form
            }).then((res) => {
                if (res.data) {
                    this.$store.dispatch('GET_DEVICEINFO');
                    alert("修改成功");
                }
            });
        }
    },
    mounted: function () {
        this.getuser_info();
    },
}
</script>
